<template>
  <!--组件的结构代码-->
  <div id="student">
    <h1>{{ title }}</h1>
    <p>学生姓名:{{ name }}</p>
    <p>学生年龄:{{ age }}</p>
    <p>学生分数:{{ score }}</p>
  </div>
</template>


<script>
/*组件的js代码  事件绑定回调函数  响应式数据
* export  导出  default  默认导出  只能有一个    组件对象   暴露对象
* import   导入
*
*
* */
export default {
  name: "TeacherView",
  data() {
    return {
      title: '学生信息展示',
      name: 'tom',
      age: 20,
      score: 98
    }
  }
}
</script>


<style scoped>
/*组件的css样式 scoped 作用域的声明  样式只对当前组件有效  */
#student {
  width: 200px;
  height: 200px;
  background-color: tomato;
}
</style>